<template><main>

  <c-header />

  <am-container>
    <am-row>
      <am-col :span="12" custom-class="dg-art">
          <div class="am-u-sm-12 am-u-md-3">
            <am-scrollbar :height="200" :auto-hide="false">
              <am-list :static="true">
                <am-list-item v-for="(prize, index) in prizeData" :key="index">
                  <div :class="{ 'am-text-danger': prize.awardID === awardID }" @click="loadWorks(prize)" style="cursor: pointer;">
                    {{ prize.name }}
                  </div>
                </am-list-item>
              </am-list>
            </am-scrollbar>
          </div>
          <div class="am-u-sm-12 am-u-md-9">
            <p>名额数量：{{ prize.places }}</p>
            <p>奖项说明：{{ prize.desc }}</p>
            <p>奖品说明：{{ prize.prizeName }}</p>
          </div>       
      </am-col>

      <div class="am-u-sm-6 am-u-md-4" v-for='(works, index) in worksData' :key="index">
        <section class="am-panel am-panel-default">
          <div class="dg-panel-bd">
            <router-link :to="'/worksDetail/' + works.worksID">
              <am-image v-lazy="thumbnail + works.mainPic" custom-class="am-center am-radius" :responsive="true" :src="''" alt="" />
            </router-link>
          </div>
          <footer class="am-panel-footer">
            <span class="am-link-muted">{{ works.worksName }} by {{ works.designerName }} · {{ works.poll }}票</span>
          </footer>
        </section>
      </div>

      <div class="am-end"></div>
    </am-row>
  </am-container>
</main></template>

<script>
import Header from '@/components/Header'

export default {
  name: 'prize-list',
  data() {
    return {
      awardID: '',
      prize: {},
      prizeData: this.$store.state.game.detail,
      worksData: [],
      page: {
        num: 1,
        per: 10,
        res: {
          total: 0,
          count: 0
        }
      }
    }
  },
  components: {
    CHeader: Header
  },
  methods: {
    ready() {
      this.loadData();
    },
    loadData() {
      this.loadWorks();
    },
    loadWorks(prize = this.prizeData[0]) {
      this.awardID = prize.awardID;
      this.prize = prize;
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETPRIZEWORKSPAGED, {
          gameID:	+this.$store.getters.gameID,
          awardID:	+this.awardID,
          pageNum:	+this.page.num,
          numPerPage: +this.page.per,
        }).then(res => {
          this.worksData = res.data.data.works;
        });
      });
    }
  },
  mounted() {
    console.log('prizelist mounted');
    this.ready();
  }
}
</script>

<style lang="less" scoped>
/**
 grid布局有兼容性问题
 参考：https://caniuse.com/#search=grid
*/
.grid-box {
  display: grid; 
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: .5rem;
}
/**
  实现与grid同样的效果
*/
.flex-box {
  /*flex*/
  display: flex;
  justify-content: space-between;
  .item1 {
    max-width: 35%;
    flex-grow: 1;
  }
  .item2 {
    max-width: 60%;
    flex-grow: 3;
  }
}
</style>